<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="lib/vue.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

</head>
<body>

<div id="app">
    <img srcset="lib/lifecycle.png" alt="Vue声明周期">
    <h3 id="h3"> {{ok}}</h3>
    <input type="button"  value="修改参数" @click="ok='no' " />
</div>
<script>
    <!--        vue的声明周期-->
    /**
     * 什么是生命周期： 就是vue对象创建到销毁的的发生的事件称为生命周期函数或是方法
     *
     */
    var vm = new Vue({
        el: '#app',
        data: {
            ok: "测试",

        },
        methods: {
            show() {
                console.log("show")
            }
        },
        beforeCreate() {
            console.log("1vue实例初始化之前,事件处理器和")
            console.log(this.ok)
        }, //1生命周期第一个函数，vue实例对象创建之前进行触发,并且初始化，
        created() {
            console.log("2函数和参数初始化完成")
            console.log(this.ok)
        },//2初始化完成后的第二次
        beforeMount() {
            console.log("3页面模板生产完成，存放在内存中没有渲染到页面中")
            console.log(document.getElementById("h3").innerText)

        },//3 初始化中的第三步函数
        mounted() {
            console.log("4vue将内存中的数据渲染到页面")
            console.log(document.getElementById("h3").innerText)
        },//4渲染到内存
        beforeUpdate() {
            console.log("5 数据绑定执之前,页面参数。获取的是页面中的参数")
            console.log(document.getElementById("h3").innerText)

        },
        updated() {
            console.log("6 数据绑定更新的时候，获取的是内存中的数据")
            console.log(this.ok)
        },
        beforeDestroy() {
           console.log("7 销毁执之前触发的函数")
        },
        destroyed() {
            console.log("8 销毁后的触发函数")

        }

    });
    Vue.config.devtools = true
</script>
</body>
</html>